<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>AJAX Tutorials </title>

<script>

	// The General Function 
	function standerLoad(method,url,cFun,data,xmlhttp){
		
		xmlhttp.onreadystatechange = cFun;
		xmlhttp.open(method, url, true);
		if(method == "GET")
			xmlhttp.send();
		else if(method == "POST"){
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			xmlhttp.send(data);
		}
			
		
	}
	
	function loadAjax(){
		
		var xmlhttp = new XMLHttpRequest();
		
		standerLoad("POST","testAjax.jsp",function()
				  {
			  if (xmlhttp.readyState==4 && xmlhttp.status==200)
			    {
			    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
			    }
			},"fName=Mahmoud&lName=Soliman",xmlhttp);

	}
	
	function loadXMLDoc()
	{
		
		var xmlhttp = new XMLHttpRequest();
		
		standerLoad("GET","ajax.xml",function()
				  {
			var txt,x,i;
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    xmlDoc=xmlhttp.responseXML;
		    txt="";
		    x=xmlDoc.getElementsByTagName("COUNTRY");
		    for (i=0;i<x.length;i++)
		      {
		      txt=txt + x[i].childNodes[0].nodeValue + "<br>";
		      }
		    document.getElementById("myDiv2").innerHTML=txt;
		    }
		  },"",xmlhttp);	
	}
	
	function suggest(str){
		var xmlhttp;
		if (str.length==0)
		  { 
		  document.getElementById("sugList").innerHTML="";
		  return;
		  }
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    document.getElementById("sugList").innerHTML=xmlhttp.responseText;
		    }
		  }
		xmlhttp.open("GET","testAjax2.jsp?q="+str,true);
		xmlhttp.send();
			}
	
	function record(str){
		var xmlhttp;
		if (str.length==0)
		  { 
		  document.getElementById("rec").innerHTML="";
		  return;
		  }
		if (window.XMLHttpRequest)
		  {// code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		  }
		else
		  {// code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		  }
		xmlhttp.onreadystatechange=function()
		  {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		    {
		    document.getElementById("rec").innerHTML=xmlhttp.responseText;
		    }
		  }
		xmlhttp.open("GET","TestAjax?q="+str,true);
		xmlhttp.send();
	}
	
</script>

</head>
<body>
<input type = "text" id = "txt1" onkeyup = "suggest(this.value)" /> <span id = "sugList"></span><br/>
<input type = "text" id = "ID" onkeyup = "record(this.value)" /> <span id = "rec"></span><br/>
<button onClick = "loadAjax()">Yala Ajax</button>
<button onClick = "loadXMLDoc()">Using XML</button>
<div id = "myDiv"></div>
<div id ="myDiv2" ></div>
</body>
</html>